<template>
    <div class="home-swiper">
        <swiper :options="swiperOption">
            <!-- slides -->

            <swiper-slide v-for="item in swiperList" :key="item.id">
                <img :src="item.imgUrl" alt="">
            </swiper-slide>
            <!-- Optional controls -->
            <div class="swiper-pagination"  slot="pagination"></div>
        </swiper>
    </div>
</template>

<script type="text/javascript">
export default {
    name : 'home-swiper',
    data(){
        return {
            swiperOption : {
                pagination: {
                    el: '.swiper-pagination'
                },
                loop : true,
                autoplay : true
            }
        }
    },
    props : [
        "swiperList"
    ]
}
</script>

<style scoped lang="stylus">

.home-swiper{ width:100%; height:2rem;}

.home-swiper img{ width:100%; height:100%;}

.home-swiper >>> .swiper-pagination-bullet{ width: 0.15rem; height: 0.15rem;}

.home-swiper >>> .swiper-container-horizontal > .swiper-pagination-bullets .swiper-pagination-bullet{ margin: 0 0.06rem;}

.home-swiper >>> .swiper-pagination-bullet-active{ background:#fff;}

</style>

